<template>
  <el-card class="card">
    <el-row :gutter="20" class="header">
      <el-col :span="5">
        <el-input placeholder="请输入用户昵称..." v-model="queryForm.query" clearable></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="initMechanismList">搜索</el-button>
      <el-button type="info" :icon="Setting" @click="showAll">重置</el-button>
    </el-row>
    <el-table :data="tableData"
              border stripe
              style="width: 100%"
    >
      <el-table-column prop="id" label="#" width="50"/>
      <el-table-column prop="name" label="机构名称" width="200"/>
      <el-table-column prop="describe" label="描述"/>
    </el-table>
    <el-pagination :total="total"/>
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import { Search, Setting } from '@element-plus/icons-vue'
import request from "@/util/request";

/**
 * 查询条件
 */
const queryForm = ref({
  query: '',
  pageNum: 1,
  pageSize: 10,
})

/**
 * 数据总数
 */
const total = ref(0);

/**
 * 表格数据初始化
 */
const tableData = ref([]);

/**
 * 初始化机构信息
 */
const initMechanismList = async () => {
  const res = await request.post("mechanism/listByPage", queryForm.value);
  console.log(res)
  tableData.value = res.data.mechanismList;
  total.value = res.data.total;
}
initMechanismList()

/**
 * 重置显示全部数据
 */
const showAll = () => {
  queryForm.value.query = "";
  initMechanismList();
}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

::v-deep th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 20px;
  font-size: 15px;
}

.el-tag--small {
  margin-left: 5px;
}

.card {
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
</style>